<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>用户注册</h1>

    <!-- 3种链接放在 head中 -->
    <!-- 内部连接 -->
     <!-- 外部连接  <link rel = "stylesheet" href = "style.css"（最漂亮） -->
      <!-- 行内链接 -->
    <style>
        /* 这里的span是标签选择器选择器 {}——>如何修饰 */
        /* span{
            color: red;
        } */


        /* .是类选择器 */
        /* .left{
            color: red;
        } */

        /* #是id选择器 */
        .left{
            color: green;
            font-size: 32px;
            border: 10px solid blue;
        }


        /* 内外边距是相对的 margin 外边距  padding  内边距 */
        .demo{
            color: green;
            font-size: 25px;
            border: 5px solid rgb(255, 77, 0);
            width: 500px;
            height: 200px;
            margin: 10px;
            padding: 20px;
        }

        /* 复合选择器由多个单选择器组成（任何单选择器都可以）每个选择器之间用空格 隔开 */
        /* 通配符选择器 *选择所有元素  */
    </style>

    <table>
        <tr>
            <td>用户名</td>
            <td><input type="text" placeholder="请输入用户名"></td>
        </tr>
        <tr>
            <td>手机号</td>
            <td><input type="text" placeholder="请输入手机号"></td>
        </tr>
        <tr>
            <td>密码</td>
            <td><input type="password" placeholder="请输入密码"></td>
        </tr>
    </table>

    <!-- div相当于包装箱 span相当于包装纸 （可以挤一挤） -->
    <div>
        <input type="button" value="注册">
        <span class="left" id="test">已有账号？</span>
        <span class="right" id="2">已有账号？</span>
        
        <a href="#"> 登录</a>
    </div>


    <div class="demo">我是一个div</div>
    <div class="demo">我是一个div</div>
</body>
</html>